<template>
  <a-layout class="editor-layout">
    <a-layout-header class="editor-header">
      <Header></Header>
    </a-layout-header>
    <a-layout
      class="editor-main"
      :class="[
        !layout.showLayer && !layout.showComponent
          ? 'editor-main-hide-left-sider'
          : '',
        layout.showComponent ? 'editor-main-sider-attempt' : '',
      ]"
    >
      <a-layout-sider
        :class="layout.showComponent ? 'small-attempt' : ''"
        v-show="layout.showLayer || layout.showComponent"
      >
        <LeftTool></LeftTool>
      </a-layout-sider>
      <a-layout-content class="editor-m-content">
        <Editor></Editor>
      </a-layout-content>
      <a-layout-sider class="editor-field">
        <CanvasField v-if="config.currentIndex === ''"></CanvasField>
        <ComponentField v-if="config.currentIndex"></ComponentField>
      </a-layout-sider>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Editor from "@/components/viewEditor/editor/index.vue";
import CanvasField from "@/components/viewEditor/CanvasField/index.vue";
import ComponentField from "@/components/viewEditor/ComponentField/index.vue";
import Header from "@/components/viewEditor/Header/index.vue";
import LeftTool from "@/components/viewEditor/leftTool/index.vue";
import { useConfig } from "@/stores/datav/useConfig";
import { useLayout } from "@/stores/datav/layout";
export default defineComponent({
  components: {
    Editor,
    CanvasField,
    ComponentField,
    Header,
    LeftTool,
  },
  setup() {
    const config = useConfig();
    const layout = useLayout();
    return {
      config,
      layout,
    };
  },
});
</script>

<style lang="less">
.editor-layout {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.editor-layout .editor-header {
  height: 40px;
  padding: 0 10px;
}

.editor-layout .editor-main {
  height: calc(100vh - 40px);
}

.editor-layout .small-attempt {
  max-width: 300px !important;
  min-width: 300px !important;
  width: 300px !important;
}

.editor-layout .editor-m-content {
  width: calc(100vw - 200px - 340px) !important;
}
.editor-main.editor-main-hide-left-sider .editor-m-content {
  width: calc(100vw - 340px) !important;
}
.editor-main.editor-main-sider-attempt .editor-m-content {
  width: calc(100vw - 300px - 340px) !important;
}
.editor-layout .editor-field {
  max-width: 340px !important;
  min-width: 340px !important;
  width: 340px !important;
}
</style>
